<template>
  <div>
    <div class="search clear">
      <div class="fixed_nav">
        <mt-navbar v-model="selected">
          <mt-tab-item id="1" @click.native="navChange">推荐</mt-tab-item>
          <mt-tab-item v-for="newsCate in getNewsCate" :id="newsCate._id" @click.native="navChange">{{newsCate.title}}</mt-tab-item>
        </mt-navbar>
        <input type="text" placeholder="搜索" class="left" v-model="value">
        <button class="right" @click="search">查找</button>
      </div>
    </div>

    <div class="goodsContent">
      <div class="clear goods" v-for="goods in getGoodsList">
        <div class="left _goodsImg"><img class="goodsImg" :src="`http://127.0.0.1:3000/${goods.thumb[0].filename}`" width="100%" /></div>
        <div class="left _content">
          <p class="goodsTilte">{{goods.title}}</p>
          <p class="brand">品牌:{{goods.brand}}<e class="right">库存：{{goods.quantity}}</e></p>
          <p class="clear price"><span class="left">￥{{goods._price}}</span>
              <mt-button class="right" type="primary" size="small" :data="JSON.stringify(goods)" @click="addCart">加入购物车</mt-button>
          </p>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
    import {mapGetters} from "vuex";
    import {mapActions} from "vuex";
    import {formatDateTime} from '../date';

    export default{
        data(){
          return{
            selected:"1",
            value:"",
          }
        },
        methods:{
            ...mapActions(["setNewsCate","setFilterGoods","setGoodsList","setCartGoods"]),
            setTime(date){
              return formatDateTime(date)
            },
            navChange(){
              if(this.selected!="1"){
                this.setFilterGoods({
                  _id:this.selected,
                })
              }else{
                this.setFilterGoods({
                  rows: 10,
                  page: 1,
                  total: 0,
                })
              }
              this.setGoodsList(this.getFilterGoods)
            },
            search(){
                this.setFilterGoods({
                  title:this.value,
                })
                this.setGoodsList(this.getFilterGoods)
            },
            addCart(e){
              var data = JSON.parse(e.target.attributes["data"].value);
              this.setCartGoods(data)
            }
        },
        computed:{
          ...mapGetters(["getNewsCate","getFilterGoods","getGoodsList"])
        },
        created(){
          this.setNewsCate(2);
          this.setGoodsList(this.getFilterGoods)
        },
    }
</script>

<style>
  .goodsContent{
    /* padding:0.4rem; */
  }
  .goods{
    margin-bottom: 1rem;
    height: 6.5rem;
    background: white;
    padding:0.8rem;
  }
  ._goodsImg{
    width: 40%;
  }
  ._content{
    width:57%;
    margin-left:3%;
    padding-bottom:0.6rem;
    border-bottom:1px solid #ccc
  }
  .goodsTilte{
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin-top: 0.5rem;
    width:95%;
  }
  .goodsImg{
    height:6.5rem;
    margin-right:1rem;
    border:1px solid #888
  }
  .brand{
    margin-top:0.5rem
  }
  .price{
    margin-top:0.3rem;
  }
  .price>span{
    color:red;
    margin-top: 0.8rem;
  }
  .price>e{
    margin-right:0.8rem
  }


  .mint-navbar{
    white-space: nowrap;
    overflow: auto;
    background: 	#F5F5F5;
  }
  .mint-navbar .mint-tab-item{
    margin-right:0.6rem;
    margin-left:0.6rem;
  }
  .mint-tab-item>.mint-tab-item-label{
    font-size: 1.2rem
  }
  .mint-navbar .mint-tab-item.is-selected{
    color:red;
  }
  .search{
    position: relative;
    width: 100%;
    height: 6rem;
    z-index: 100;
  }
  .fixed_nav{
    position: fixed;
    width: 100%;
  }
  .search input{
    width:80%;
    border: 0;
    /* background:red; */
    height: 2.2rem;
    font-size: 1.1rem;
    border:5px solid #D3D3D3;
    border-right:0;
    box-sizing: border-box;
    outline: none;
  }
  .search button{
    width:20%;
    border: 0;
    /* background:red; */
    height: 2.2rem;
    font-size: 1.1rem;
    text-align: center;
    border:5px solid #D3D3D3;
    box-sizing: border-box;
    outline: none;
  }
</style>
